$(window).on('load', function() {
		let box = $('#box')
	    
	    let c2 = false;
	    let c3 = false;
	    let orderType = 0;
		let scon = 0;
		goodsFind()
		$('#c2').change(function(){
	    	if ($('#c2').is(':checked')) {
	    	    console.log("c2复选框被选中");
	    	    c2 = true;
	    	    goodsFind()
	    	} else {
	    	    console.log("c2复选框未被选中");
	    	    c2 = false;
	    	    goodsFind()
	    	}
		})
		$('#c3').change(function(){
	    	if ($('#c3').is(':checked')) {
	    	    console.log("c3复选框被选中");
	    	    c3 = true;
	    	    goodsFind()
	    	} else {
	    	    console.log("c3复选框未被选中");
	    	    c3 = false;
	    	    goodsFind()
	    	}
		})
		$('#orderTypeA').click(function(){
			$('#animatedDropdown2 strong').text("价格从高到低")
			console.log('类型a')
			orderType = 1
			goodsFind()
		})
		$('#orderTypeB').click(function(){
			$('#animatedDropdown2 strong').text("价格从低到高")
			console.log('类型b')
			orderType = 2
			goodsFind()
		})
		$('#orderTypeC').click(function(){
			$('#animatedDropdown2 strong').text("卖家信用从高到低")
			console.log('类型c')
			orderType = 3
			goodsFind()
		})
		$('#sc1').click(function(){
			$("#animatedDropdown1 strong").text('综合')
			$('#animatedDropdown1').removeClass('selected')
			console.log('筛选1')
			scon = 0
			goodsFind()
		})
		$('#sc2').click(function(){
			$("#animatedDropdown1 strong").text($(this).text())
			console.log('筛选2')
			$("#animatedDropdown1").addClass("selected")
			scon = 1
			goodsFind()
		})
		$('#sc3').click(function(){
			$("#animatedDropdown1 strong").text($(this).text())
			$("#animatedDropdown1").addClass("selected")
			console.log('筛选3')
			scon = 2
			goodsFind()
		})
		$('#sc4').click(function(){
			$("#animatedDropdown1 strong").text($(this).text())
			$("#animatedDropdown1").addClass("selected")
			console.log('筛选4')
			scon = 3
			goodsFind()
		})
		$('#sc5').click(function(){
			$("#animatedDropdown1 strong").text($(this).text())
			$("#animatedDropdown1").addClass("selected")
			console.log('筛选5')
			scon = 4
			goodsFind()
		})
		$('#sc6').click(function(){
			$("#animatedDropdown1 strong").text($(this).text())
			$("#animatedDropdown1").addClass("selected")
			console.log('筛选6')
			scon = 5
			goodsFind()
		})
		$('#sc7').click(function(){
			$("#animatedDropdown1 strong").text($(this).text())
			$("#animatedDropdown1").addClass("selected")
			console.log('筛选7')
			scon = 6
			goodsFind()
		})
		$('#sc8').click(function(){
			$("#animatedDropdown1 strong").text($(this).text())
			$("#animatedDropdown1").addClass("selected")
			console.log('筛选8')
			scon = 7
			goodsFind()
		})
		$('#sc9').click(function(){
			$("#animatedDropdown1 strong").text($(this).text())
			$("#animatedDropdown1").addClass("selected")
			console.log('筛选9')
			scon = 8
			goodsFind()
		})
		$('#sc10').click(function(){
			$("#animatedDropdown1 strong").text($(this).text())
			$("#animatedDropdown1").addClass("selected")
			console.log('筛选10')
			scon = 9
			goodsFind()
		})
		$('#sc11').click(function(){
			$("#animatedDropdown1 strong").text($(this).text())
			$("#animatedDropdown1").addClass("selected")
			console.log('筛选11')
			scon = 10
			goodsFind()
		})
		$('#sc12').click(function(){
			$("#animatedDropdown1 strong").text($(this).text())
			$("#animatedDropdown1").addClass("selected")
			console.log('筛选12')
			scon = 11
			goodsFind()
		})
		$('#sc13').click(function(){
			$("#animatedDropdown1 strong").text($(this).text())
			$("#animatedDropdown1").addClass("selected")
			console.log('筛选13')
			scon = 12
			goodsFind()
		})
		$('#searchBtn').click(function(e){
			e.preventDefault(); // 阻止表单默认提交
			searchName = $('#searchBar').val();
			goodsFind();
		});
		$('#searchForm').submit(function(e) {
		    e.preventDefault(); // 阻止表单默认提交
		    searchName = $('#searchBar').val();
		    goodsFind();
		    return false;
		});
		function goodsFind() {
    // 清空容器并显示骨架屏
    box.empty().html(`
        <div class="row">
            ${Array(12).fill().map(() => `
                <div class="col-lg-2 col-md-4 col-sm-6 mb-4">
                    <div class="skeleton-card">
                        <div class="skeleton-img skeleton"></div>
                        <div class="skeleton-line skeleton"></div>
                        <div class="skeleton-line short skeleton"></div>
                        <div class="skeleton-price skeleton"></div>
                        <div>
                            <div class="skeleton-avatar skeleton"></div>
                            <div class="skeleton-name skeleton"></div>
                        </div>
                    </div>
                </div>
            `).join('')}
        </div>
    `);
    
    let con = {
        searchName: searchName,
        pageNum: 1,
        pageSize: 30,
        orderType: orderType,
        con2: c2,
        con3: c3,
        scon: scon
    };
    
    $.ajax({
        url: "searchGoodsDo",
        type: 'POST',
        contentType: "application/json",
        data: JSON.stringify(con),
        dataType: 'json',
        success: function(data) {
            box.empty();
            
            if (data.length === 0) {
                box.html(`
                    <div class="text-center py-5">
                        <i class="far fa-frown fa-3x mb-3" style="color: #ccc;"></i>
                        <h4>没有找到相关商品</h4>
                        <p class="text-muted">尝试调整搜索条件或关键词</p>
                    </div>
                `);
                return;
            }
            
            let row = $('<div class="row"></div>');
            
            $.each(data, function(index, item) {
                const card = $(`
                    <div class="col-lg-2 col-md-4 col-sm-6 mb-4">
                        <div class="goods-card">
                            <form action="addCollDo" class="goodsInfoForm">
                                <input type="hidden" name="goodId" value="${item.goodslist.goodid}">
                                <input type="hidden" name="userId" value="${item.user.userid}">
                                <a href="#" onclick="$(this).closest('form').submit();" class="text-decoration-none">
                                    <div class="goods-img-container">
                                        <img src="${item.goodslist.goodimg}" 
                                             alt="${item.goodslist.goodname}" 
                                             class="goods-img">
                                    </div>
                                    <div class="goods-info">
                                        <h3 class="goods-title">${item.goodslist.goodname}</h3>
                                        <div class="goods-price">￥${item.goodslist.goodprice}</div>
                                        <p class="goods-desc">${item.goodslist.gooddec || '暂无描述'}</p>
                                        <div class="seller-info">
                                            <img src="${item.user.headimg}" 
                                                 alt="${item.user.username}" 
                                                 class="seller-avatar">
                                            <span class="seller-name">${item.user.username}</span>
                                        </div>
                                    </div>
                                </a>
                            </form>
                        </div>
                    </div>
                `);
                
                row.append(card);
                
                if ((index + 1) % 6 === 0 && index + 1 !== data.length) {
                    box.append(row);
                    row = $('<div class="row"></div>');
                }
            });
            
            if (row.children().length > 0) {
                box.append(row);
            }
        },
        error: function(xhr, status, error) {
            box.empty().html(`
                <div class="text-center py-5">
                    <i class="fas fa-exclamation-triangle fa-3x mb-3 text-danger"></i>
                    <h4>加载失败</h4>
                    <p class="text-muted">请稍后再试或刷新页面</p>
                    <button class="btn btn-primary mt-3" onclick="location.reload()">重新加载</button>
                </div>
            `);
            console.error('Error:', status, error);
        }
    });
}
	});